<template>
  <!-- 百度地图弹窗 -->
  <div
      id="baiduMapDialog"
      :style="{width:width,height:height}"
  />
</template>

<script>
  export default {
    name: 'BaiduMap',
    props: {
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      },
      chartData: {
        type: Object,
        default: () => {
        }
      }
    },
    data() {
      return {
        // 123.324204,41.657103
        centerLng: 123.324204, // 地图中心经度
        centerLat: 41.657103, // 地图中心纬度
        // color: ['#99CCFF','#CCFF66', '#FF9999', '#FFFF99', '#9999FF'], // 颜色
        icon_data_mj: [
          [123.325641,41.701498],
          [123.325066,41.670683],
        ],
        icon_data_llq: [
          [123.325354,41.701067],
          [123.324779,41.661414],
        ],
        icon_data_qiang: [
          [123.325066,41.667019]
        ],
        icon_data_qiu: [
          [123.327079,41.685123]
        ],
        icon_data_qbb: [
          [123.325066,41.669174],
          [123.323054,41.652791],
        ],
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler: function () {
          this.initChart()
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    methods: {
      initChart() {
        let _this = this
        _this.echartsModel = this.$echarts.init(this.$el)
        _this.echartsModel.clear()
        let option = {
          bmap: {
            center: [_this.centerLng, _this.centerLat],
            zoom: 13,
            roam: true, // 用户是否可以拖放和缩放地图
            opt: {
              enableMapClick: true, //禁止地图底图的点击事件
            }
          },
          animation: false,//关闭动画效果，这样在地图上覆盖散点图或者热力图的时候，拖动将不会有比较长时间的延迟
          series: []
        }
        _this.echartsModel.setOption(option)


        // 添加百度地图插件bmp，获得地图对象，获取到的百度地图对象适用于所有的百度地图的接口。
        _this.mapModel = _this.echartsModel.getModel().getComponent('bmap').getBMap()
        _this.mapModel.centerAndZoom(new BMap.Point(_this.centerLng,_this.centerLat),_this.zoom)
        _this.mapModel.setMapStyleV2({
          styleId: '2bd37d3ac9abbdbd6a9c3e1e6b3435fd'
        })


        // 枪
        for (let i = 0; i < this.icon_data_qiang.length; i++) {
          let marker = new BMap.Marker(new BMap.Point(...this.icon_data_qiang[i]), {
            icon: new BMap.Icon(require('../../../assets/images/mapIcon/qiangssxj_32.png'), new BMap.Size(48,48), {
              anchor: new BMap.Size(24, 48),
            }),
            enableClicking: false
          })
          _this.mapModel.addOverlay(marker)
        }

        // 门架
        for (let i = 0; i < this.icon_data_mj.length; i++) {
          let marker = new BMap.Marker(new BMap.Point(...this.icon_data_mj[i]), {
            icon: new BMap.Icon(require('../../../assets/images/mapIcon/mj_32.png'), new BMap.Size(48,48), {
              anchor: new BMap.Size(24, 48),
            }),
            enableClicking: false
          })
          _this.mapModel.addOverlay(marker)
        }

        // 门架情报板
        for (let i = 0; i < this.icon_data_qbb.length; i++) {
          let marker = new BMap.Marker(new BMap.Point(...this.icon_data_qbb[i]), {
            icon: new BMap.Icon(require('../../../assets/images/mapIcon/mjqbb_32.png'), new BMap.Size(48,48), {
              anchor: new BMap.Size(24, 48),
            }),
            enableClicking: false
          })
          _this.mapModel.addOverlay(marker)
        }

        // 路由器
        for (let i = 0; i < this.icon_data_llq.length; i++) {
          let marker = new BMap.Marker(new BMap.Point(...this.icon_data_llq[i]), {
            icon: new BMap.Icon(require('../../../assets/images/mapIcon/lyq_32.png'), new BMap.Size(48,48), {
              anchor: new BMap.Size(24, 48),
            }),
            enableClicking: false
          })
          _this.mapModel.addOverlay(marker)
        }


        // 球形
        for (let i = 0; i < this.icon_data_qiu.length; i++) {
          let marker = new BMap.Marker(new BMap.Point(...this.icon_data_qiu[i]), {
            icon: new BMap.Icon(require('../../../assets/images/mapIcon/qiussxj_32.png'), new BMap.Size(48,48), {
              anchor: new BMap.Size(24, 48),
            }),
            enableClicking: false
          })
          _this.mapModel.addOverlay(marker)
        }

        // _this.mapModel.setMinZoom(12.5) // 最小缩放级别
        // _this.mapModel.setMaxZoom(12.5) // 最大缩放级别
      }
    }
  }
</script>

<style scoped>
</style>
